<template>
  <div class="header-info">
    <div class="operation">
      <span>
        <el-icon><ChatDotSquare /></el-icon>
      </span>
      <span>
        <el-icon><Calendar /></el-icon>
      </span>
      <span>
        <el-icon><Search /></el-icon>
      </span>
    </div>
    <div class="info">
      <el-dropdown>
        <div class="user-info">
          <el-avatar
            :size="25"
            src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
          />
          <span class="name">lhy</span>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>
              <el-icon><InfoFilled /></el-icon>
              <span>个人信息</span>
            </el-dropdown-item>
            <el-dropdown-item>
              <el-icon><Unlock /></el-icon>
              <span>修改密码</span>
            </el-dropdown-item>
            <el-dropdown-item :divided="true" @click="handleExitClick">
              <el-icon><CircleClose /></el-icon>
              <span>退出系统</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script setup lang="ts">
import useRoutesStore from '@/stores/routes'
import router from '@/router'
import Cookies from 'js-cookie'
const routesStore = useRoutesStore()
const handleExitClick = () => {
  routesStore.menuList = []
  routesStore.routeList = []
  Cookies.remove('lhytoken')
  router.push('/login')
}
</script>

<style lang="scss" scoped>
.header-info {
  display: flex;
  align-items: center;
}
.user-info {
  display: flex;
  align-items: center;
}

.operation {
  display: inline-flex;
  margin-right: 20px;
  span {
    //相对原来定位不变
    position: relative;
    //弹性布局
    display: flex;
    //垂直居中
    align-items: center;
    //水平居中
    justify-content: center;
    width: 40px;
    height: 35px;
    //&为父选择器 hover为鼠标悬停样式
    &:hover {
      background-color: #f2f2f2;
    }
    i {
      //图标大小
      font-size: 20px;
    }
  }
}

.info {
  .user-info {
    display: flex;
    align-items: center;
    cursor: pointer;
    .name {
      margin-left: 5px;
    }
  }
  //因为下拉菜单渲染到app外面了 所以:deep找不到  只能用global全局改
  :global(.el-dropdown-menu__item) {
    line-height: 36px !important;
    padding: 6px 22px;
  }
}
</style>
